<template>
    <div class="news pdTop pdBot">
        <h2 class="pdBot">{{$t('home.news.title')}}</h2>
        <b-container>
            <b-row>
                <b-col xl="4" lg="4" md="4" sm="12" v-for="(item,index) in newsList" :key="index">
                    <div class="item" @click="toDetail(item)">
                        <div class="img"><img class="img-fluid" :src="item.coverImage"></div>
                        <p class="title">{{item.title}}</p>
                        <p class="time">{{item.issueDate | filterDate}}</p>
                    </div>
                </b-col>
            </b-row>
            <b-button variant="primary" class="more" @click="toHref">{{$t('home.news.btn')}}</b-button>
        </b-container>
    </div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType, fmtDate } from '@/utils'
export default {
    name: 'news',
    data(){
        return{
            lanType: 2,
            newsList: []
        }
    },
    filters:{
        filterDate(date){
            return fmtDate(date)
        }
    },
    mounted(){
        this.lanType = filterLocaleType(this.$i18n.locale)
        this.fetchData()
    },
    watch:{
		'$i18n.locale'(n, o) {
			this.lanType = filterLocaleType(n)
			this.fetchData()
		}
	},
    methods:{
        fetchData(){
            GetLists({
				categoryId: 4,
				lanType: this.lanType,
				page:1,
				size:3
			}).then((res)=>{
				this.newsList = res.dataList
			})
        },
        toDetail(item){
            if(item.link){
                window.open(item.link)
            }else{
                this.$router.push({
                    path: '/detail',
                    query: {
                        id: item.id,
                        tab: 2
                    }
                })
            }
		},
        toHref(){
            this.$router.push({
                path:'/news',
                query:{
                    id: 2
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.news{
    background: #f6fafe;
    text-align: center;
    .item{
        margin-bottom: 60px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid #e6e6e6;
        transition: all 0.3s;
        &:hover{
            box-shadow: 0px 15px 10px -15px #ccc;
        }
        .img{
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .title{
            text-align: left;
            color: #333333;
            height: 40px;
            line-height: 20px;
            margin: 0 20px;
            margin-top: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .time{
            text-align: left;
            font-size: 14px;
            margin: 5px 20px 20px;
            color: #999;
        }
    }
    .more{
        min-width:150px;
        background-color: #e2e6ea;
        border-color: #dae0e5;
        &:focus{
            background-color: #54adff;
            border-color: #54adff;
        }
        &:hover{
            color:#fff;
            background-color: #54adff;
            border-color: #54adff;
        }
    }
}
</style>
